<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery异步编程</title>
		<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
		<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.css">
		<style>
			#userid,#name,#age{
				width:300px !important;
			}
			.row{
				margin-top: 20px;
			}
			.row span{
				color:red;
			}
			.btn1{
				margin-top: 30px;
				margin-left: 30px;
			}

		</style>
		<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$("#name").blur(function(){
					$.ajax({
						method:"get",
						url:"http://localhost:8080/da/test",
						data:{name:$("#name").val()},
						dataType:"text",
						success:function(r){
							if(r == "has"){
								$("#name+span").html("用户名不可用").css({"color":"red"});
							}else{
								$("#name+span").html("ok").css({"color":"green"});
							}
						}
					})
				})
			})
		</script>
	</head>
	<body>
	<form id="addForm" action="/save/" method="post" enctype="multipart/form-data">
		<div class="container">
			<div class="row mx-auto">
				<label class="mx-2">学生id：</label>
				<input id="userid" type="text" class="form-control h-25 w-50"><span id=""></span>
			</div>
			<div class="row mx-auto">
				<label class="mx-2"> &nbsp&nbsp 姓名：</label>
				<input type="text" id="name" class="form-control h-25 w-50"><span id="userMsg"></span>
			</div>
			<div class="row mx-auto">
				<label class="w mx-2"> &nbsp &nbsp年龄：</label>
				<input type="text" id="age" class="form-control h-25 w-50"><span></span>
			</div>
			<div class="btn1">
				<button type="button" onclick="inertDate()" id="Btn1" class="btn btn-danger">输入</button>
				<button type="button" onclick="serchDate1()" id="Btn2" class="btn btn-primary ">查看</button>
				<button type="button" class="btn btn-success">更新</button>
				<button type="button" class="btn btn-primary ">删除</button>
			</div>
		</div>
	</form>
	<script>
		// let username = document.querySelector("#name");
		// console.log(username.value.length);
		// let userMsg = document.querySelector("#userMsg");
		// username.addEventListener("blur",function () {
		// 	let xhr = new XMLHttpRequest();
		// 	let url = "http://localhost:8080/da/test?name="+username.value;
		// 	xhr.open("get",url,true);
		// 	xhr.send();
		// 	xhr.onreadystatechange = function () {
		// 		if(xhr.readyState == 4){
		// 			if(xhr.status == 200){
		// 				let r = xhr.responseText;
		// 				if(r == "has"){
		// 					alert(111);
		// 					/*userMsg.innerHTML == "用户名已存在";*/
		// 				}else{
		// 					alert(222);
		// 		/*			userMsg.innerHTML == "用户名可用";*/
		// 				}
		// 			}
		// 		}else{
		// 			//转圈
		// 		}
		// 	}
		// })
	</script>
	</body>
</html>
